<template>
	<view>
		<view class="batch">
			<view class="batchMenu">
				<view class="" v-for="(batchMenu, batchMenuIndex) in batchList" :key="batchMenuIndex" >
					<view class="batchMenuItem" :class="{'selected':batchMenuIndex===MenuIndex }" @click="handleMenu(batchMenuIndex)">{{ batchMenu.batchName }}</view>
				</view>
			</view>

			<view class="batch_td">
				<view class="batch_td batch_td_1">序号</view>
				<view class="batch_td batch_td_2">批次信息</view>
				<view class="batch_td batch_td_3">单位</view>
				<view class="batch_td batch_td_4">数量</view>
				<view class="batch_td batch_td_5">备注说明</view>
			</view>
			<view class="batch_item" >
				<view class="batch_tr" :class="{'defultBatch':batchIndex===0}" v-for="(batch, batchIndex) in itemsInBatch" :key="batchIndex">
					<view class="batch_tr batch_tr_1">{{ batch.no }}</view>
					<view class="batch_tr batch_tr_2">
					<input class="form-input" type="text" v-model="batch.infomation" placeholder="请输入生成批号"/>
					</view>
					<view class="batch_tr batch_tr_3">{{ batch.unit.name }}</view>
					<view class="batch_tr batch_tr_4">{{ batch.quantity }}</view>
					<view class="batch_tr batch_tr_5">{{ batch.note }}</view>
					<view class="batch_del" v-if="batchIndex !== 0" @click="batchDel(index, batchIndex)">
						<uni-icons type="trash" color="white"></uni-icons>
					</view>
				</view>
				<view class="batch_add-btn" @click="addBatch(index)">+ 添加批次</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'batchForm',
	props: {
		items: {
			type: Array,
			default: () => []
		},
		selectedGoodList: {
			type: Array,
			default: () => []
		},
		index: {
			type: Number,
			default: -1
		}
	},
	data() {
		return {
			batchItemIndex: -1,
			MenuIndex:0,
			batchIndex: -1,
			batchValue: 0,
			batchName:{id: '', batchName: ''},
			
			batchList: [
				{ id: '1', batchName: '生产序列号' },
				{ id: '2', batchName: '产品保质期' },
				{ id: '3', batchName: '一物一码' },
				{ id: '4', batchName: '自定义' }
			],
			batchItem:{batchName:{id: '0', batchName: ''},batchCount:[{infomation:"",unit:{unitName:"",id:""},quantity:0,note:""}]}
		};
	},
	computed: {
		itemsInBatch() {
			return this.items[this.index].batch;
		}
	},
	created() {
		console.log('批', this.selectedGoodList, this.items, this.index);
	},
	methods: {
		handleBatchItemIndex(idx) {
			if (idx === 0) {
				uni.showToast({
					icon: 'error',
					title: '请添加批次'
				});
				return;
			}
			this.batchItemIndex = idx;
		},
		handleMenu(index){
			this.MenuIndex=index
			this.batchName=this.batchList[index]
	  	const isIn=	this.items[this.index].batch.find(item=>item.batchName.batchName===this.batchName.batchName)
			
			if(isIn==-1){
			const unit=this.items[this.index].unit
			const quantity=this.item[this.index].quantity
			const batchCount=[{infomation:`默认“${this.batchName.batchName}"批次`,unit:unit,quantity:quantity,note:""}]
			const batch={batchName:this.batchName,batchCount:batchCount}
			this.items[this.index].batch=batch
			}else{
				
			}
		
		},
		addBatch(index) {
			try {
				const no = this.items[index].batch.length;
			    const batchdetail={no:no,infomation:"",unit:{name:"",id:""},quantity:0,note:""}
				const batchItem={batchName:this.batchName,batchCount:batchCount}
				this.items[index].batch.push(batchItem);
	
			} catch (e) {
				console.error('方法错', e);
			}
		},

		batchDel(i, sub) {
			const _this = this;
			uni.showModal({
				title: '删除批次',
				content: '确定删除此批次？',
				success(res) {
					if (res.confirm) {
						_this.items[i].batch.splice(sub, 1);
					}
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.batch {
	margin-left: 100rpx;
	.batch_td {
		padding: 5rpx 20rpx;
		border-width: 2rpx;
		border-right: 2rpx solid #ccc;
		border-color: #ccc;
		display: flex;
		background-color: #f4f4f4;
		font-size: 28rpx;
		box-sizing: border-box;
		color: #333;
	}
}
.batch_td_1 {
	width: 8%;
}
.batch_td_2 {
	width: 30%;
}
.batch_td_3 {
	width: 10%;
}
.batch_td_4 {
	width: 10%;
}
.batch_td_5 {
	width: 40%;
}


.batch_tr {
	display: flex;
	padding: 10rpx 20rpx;
	border-width: 2rpx;
	border-right: 2rpx solid #ccc;
	display: flex;
	align-items: center;
	font-size: 28rpx;
    box-sizing: border-box; 
}
.batch_tr_1 {
	width: 8%;
}
.batch_tr_2 {
	width: 30%;
}
.batch_tr_3 {
	width: 10%;
}
.batch_tr_4 {
	width: 10%;
}
.batch_tr_5 {
	width: 40%;
}
.batch_tr_6 {
	width: 10%;
}
.batch_item {
	width: 100%;
}
.batch_add-btn {
	display: inline-block;
	padding: 10rpx 30rpx;
	background-color: #f0f0f0;
	color: #666;
	border-radius: 30rpx;
	font-size: 28rpx;
	cursor: pointer;
	margin-top: 20rpx;
}
.batch_del {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40rpx;
	height: 40rpx;
	border-radius: 20rpx;
	background-color: red;
	cursor: pointer;
	:active {
		background-color: #666;
	}
}
.batchMenu {
	display: flex;
}
.batchMenuItem{
	background-color: #aaaaaa;
	display: flex;
	align-items: center;
	color: white;
	font-weight: 500;
	justify-content: center;
	font-size: 28rpx;
	width: 200rpx;
	height: 50rpx;
	border-radius: 25rpx;
	margin: 10rpx 30rpx;
	cursor: pointer;
	
}
.defultBatch{
	background-color: #f5f5f5;
	color: #55aaff;
}
.selected{
	background-color: #55aaff;
	font-weight: 700;
	
}
.table-input{
	width: 100%;
	height: 60rpx;
	border: 2rpx solid #eee;
	border-radius: 6rpx;
	padding: 0 10rpx;
	font-size: 28rpx;
}
</style>